import { View, Text, StyleSheet, Image, TouchableOpacity, ScrollView } from 'react-native';
import { useState } from 'react';
import { useRouter } from 'expo-router';

export default function ProductDetailScreen() {
  const [quantity, setQuantity] = useState(1);
  const router = useRouter();

  return (
    <ScrollView style={styles.container}>
      {/* Header Bar */}
      <View style={styles.headerBar}>
        <TouchableOpacity onPress={() => router.back()}>
          <Text style={styles.backText}>←</Text>
        </TouchableOpacity>
        <Text style={styles.headerTitle}>商品資訊</Text>
        <View style={{ width: 24 }} />
      </View>

      {/* Image Carousel Placeholder */}
      <View style={styles.imageBox}>
        <Image source={require('../../assets/logo.png')} style={styles.image} />
        <View style={styles.dotRow}>
          <View style={[styles.dot, styles.activeDot]} />
          <View style={styles.dot} />
        </View>
      </View>

      <View style={styles.contentBox}>
        <Text style={styles.name}>Product Name</Text>
        <Text style={styles.price}>$15.00</Text>
        <View style={styles.badge}><Text style={styles.badgeText}>Members Only</Text></View>

        <Text style={styles.desc}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</Text>
        <Text style={styles.meta}>Digital product</Text>

        <View style={styles.separator} />

        <Text style={styles.label}>Quantity</Text>
        <View style={styles.qtyBox}>
          <TouchableOpacity onPress={() => setQuantity(q => Math.max(1, q - 1))}>
            <Text style={styles.qtyBtn}>-</Text>
          </TouchableOpacity>
          <Text style={styles.qtyText}>{quantity}</Text>
          <TouchableOpacity onPress={() => setQuantity(q => q + 1)}>
            <Text style={styles.qtyBtn}>+</Text>
          </TouchableOpacity>
        </View>

        <TouchableOpacity style={styles.cartBtn}>
          <Text style={styles.cartText}>Add to Cart</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  headerBar: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingTop: 60,
    paddingHorizontal: 20,
    paddingBottom: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  backText: {
    fontSize: 20,
    color: '#333',
  },
  headerTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#111',
  },
  imageBox: {
    backgroundColor: '#f4f4f4',
    alignItems: 'center',
    paddingVertical: 30,
  },
  image: {
    width: 200,
    height: 200,
    resizeMode: 'contain',
    marginBottom: 10,
  },
  dotRow: {
    flexDirection: 'row',
    gap: 6,
  },
  dot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: '#ccc',
  },
  activeDot: {
    backgroundColor: '#333',
  },
  contentBox: {
    padding: 20,
  },
  name: {
    fontSize: 20,
    fontWeight: '700',
    color: '#111',
    marginBottom: 6,
  },
  price: {
    fontSize: 16,
    fontWeight: '500',
    color: '#111',
    marginBottom: 10,
  },
  badge: {
    alignSelf: 'flex-start',
    backgroundColor: '#eee',
    borderRadius: 6,
    paddingHorizontal: 8,
    paddingVertical: 4,
    marginBottom: 12,
  },
  badgeText: {
    fontSize: 12,
    color: '#666',
  },
  desc: {
    fontSize: 14,
    color: '#333',
    marginBottom: 8,
  },
  meta: {
    fontSize: 13,
    color: '#aaa',
    marginBottom: 16,
  },
  separator: {
    height: 1,
    backgroundColor: '#eee',
    marginVertical: 16,
  },
  label: {
    fontSize: 15,
    color: '#111',
    marginBottom: 8,
  },
  qtyBox: {
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    width: 120,
    justifyContent: 'space-between',
    paddingHorizontal: 10,
    paddingVertical: 6,
    marginBottom: 20,
  },
  qtyBtn: {
    fontSize: 20,
    color: '#777',
  },
  qtyText: {
    fontSize: 16,
    color: '#111',
  },
  cartBtn: {
    backgroundColor: '#444',
    paddingVertical: 14,
    borderRadius: 10,
    alignItems: 'center',
  },
  cartText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#fff',
  },
});